<template>
  <header
    ref="header"
    :class="{
      'hide-btn': hideBtn,
      'main-title': mainTitle,
      'custom-header':isCustomizeHeader
    }"
    class="je-header"
  >
    <div
      v-if="!hideBtn"
      @tap.stop.prevent="handleBack"
      class="back-btn mui-action-back"
    >
      <slot name="left-extra">
        <i class="jeicon jeicon-angle-left" />
        <span class="back-text">{{ backText }}</span>
      </slot>
    </div>
    <div class="title">
      <slot name="extra">
        {{ title }}
      </slot>
    </div>
    <div
      v-if="!hideBtn"
      @tap="handleExtraClick"
      class="extra"
    >
      <slot name="right-extra" />
    </div>
  </header>
</template>

<script>
export default {
  name: 'Header',
  props: {
    isCustomizeHeader: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    backText: {
      type: String,
      default: '',
    },
    hideBtn: {
      type: Boolean,
      default: false,
    },
    hideCancel: {
      type: Boolean,
      default: false,
    },
    /*
    * mainTitle 模式下 中间区域最大自适应，左右两边补充
    */
    mainTitle: {
      type: Boolean,
      default: false,
    },
    noBack: {
      type: Boolean,
      default: false,
    },
    plusGoRouter: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {

    }
  },
  mounted() {
    if(this.plusGoRouter) {
      mui.back = () => {
        this.$router.back()
      };
    }
  },
  watch: {
    plusGoRouter(nv) {
      if(vn) {
        mui.back = () => {
          this.$router.back()
        };
      }
    }
  },
  methods: {
    handleBack() {
      if (this.noBack) {
        this.$emit('hideWin');
      } else if (window.plus) {
        mui.back();
          // !this.plusGoRouter && mui.back();
          // if(this.plusGoRouter) {
          //   mui.back = () => {
          //     this.$router.back()
          //   };
          //   this.$router.back()
          // }
      } else {
        // 判断是否app返回
          this.$router.back();
      }
    },
    handleExtraClick() {
      this.$emit('extraClick');
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@/theme/index.less";
*{ touch-action: none; }
header.je-header.custom-header {
  z-index: 10!important;
  height: unit(25 * @hd, px);
  line-height: unit(25 * @hd, px);
  .back-btn {
    i {
      font-size: 14px;
    }
  }
  .title {
    font-size: 14px;
  }
}
header.je-header {
  height: unit(45 * @hd, px);
  line-height: unit(45 * @hd, px);
  // box-sizing: content-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  background-color: #536dfe;
  padding: 0 30px;
  font-size: 32px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  .back-btn {
    height: 100%!important;
    display: flex;
    align-items: center;
    .back-text {
      margin-left: 5px;
    }
    i {
      color: #ffffff;
      font-size: 32px;
    }
  }
  .title {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }
  .extra {
    text-align: right;
  }
  //  mainTitle 模式下 中间区域最大自适应，左右两边补充
  &:not(.main-title) > * {
    flex: 1;
  }
  .title {
    flex: 1;
  }
  &.hide-btn {
    padding-left: 15px;
    padding-right: 18px;
  }
}
.je-content {
  padding-top: 0 !important;
}
</style>
